<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
    <script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d1"></div>
<!--<div>-->
    <!--<ul>-->
        <!--<li id="li1">a</li>-->
        <!--<li>b</li>-->
        <!--<li>c</li>-->
        <!--<li>d</li>-->
    <!--</ul>-->
</div>
<img src="a.png ">
<input type="button" value="点击">
<script>
    $("input").click(function () {
//        $(".d2").css({background:"red"});  //点击之后修改div的背景颜色
        /*$("div ul li").css({background:"red"});*/ //层级结构
//        $("#li1+").css({background:"yellow"});  获取li1的下一个节点
//        $("#li1~").css({background:"blue"});  获取li1的下一个所有节点
//        $("#d1").hide(6000); //6000毫秒内隐藏
//        $("#d1").show(6000); //6000毫秒内显示出来
        $("input").click(function () {
            $("img").attr("src","b.png");  //attr 属性 （键，值）修改src属性
        });
    });
</script>
</body>
</html>